/*
 * @Description: 全宗信息面板
 * @Author: Rfan
 * @Date: 2022-02-10 09:30:53
 * @LastEditTime: 2022-05-25 08:54:18
 */

import { FC, useEffect, useState } from 'react';
import { Button, Space, Table } from 'antd';
import classNames from 'classnames/bind';
import { observer } from 'mobx-react-lite';
import { appState } from '@/store/mobx';
import { formatDate } from '@/utils';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useApproveContext } from '../../contexts/ApproveContext';
import { EnumApproveDialogTypes, EnumApproveNavTypes } from '../../dictionaries';
import styles from '../../styles/list.module.scss';
import type { IPageQuery } from '@/interfaces/global';

const cx = classNames.bind(styles);

const { Column } = Table;

export type ApproveListProps = {
  title?: string;
  data?: any;
};

const ApproveList: FC<ApproveListProps> = () => {
  const formatMessage = useFormatMessage();
  const {
    approveNav,
    approveList,
    getApproveList,
    getApproveHisList,
    selectItems,
    showApproveDialog
  } = useApproveContext();
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });

  useEffect(() => {
    const assignee = appState.userInfo.id;
    if (assignee) {
      setListQuery((state: IPageQuery) => {
        return {
          ...state,
          pageNo: 1,
          param: {
            ...listQuery.param,
            assignee
          }
        };
      });
    }
  }, [approveNav]);

  useEffect(() => {
    if (listQuery?.param?.assignee) {
      console.log('listQuery', listQuery);
      setLoading(true);
      const method =
        approveNav === EnumApproveNavTypes.Undo
          ? getApproveList(listQuery)
          : getApproveHisList(listQuery);
      method
        .then((res: any) => {
          console.log('back', res);
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  /**
   * @description: 打开通知弹窗方法
   */
  const showApproveDialogFunc = (record: any, type: EnumApproveDialogTypes) => {
    showApproveDialog(record, type);
  };

  // 表格选项相关设置
  const onSelectChange = (selectedRowKeys: number[]): void => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  // 切换页码触发
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state: any) => {
      return {
        ...state,
        pageNo: page,
        pageSize
      };
    });
  };

  return (
    <div className={cx('approve-list')}>
      <Table
        dataSource={approveList}
        loading={loading}
        rowKey="processInstanceId"
        bordered
        rowSelection={rowSelection}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex={['applyForm', 'id']} key="id" align="center" />
        <Column title="申请标题" dataIndex={['applyForm', 'title']} key="title" align="center" />
        <Column title="提供单位" align="center" />
        <Column
          title="申请人"
          dataIndex={['applyForm', 'proposer']}
          key="proposer"
          align="center"
        />
        <Column
          title="利用方式"
          dataIndex={['applyForm', 'useTypeEntity']}
          key="useTypeEntity"
          align="center"
        />
        <Column title="状态" dataIndex="status" key="status" align="center" />
        <Column title="通知状态" align="center" />
        <Column
          title="申请时间"
          dataIndex={['applyForm', 'applyTime']}
          key="applyTime"
          align="center"
          render={(text) => formatDate(text)}
        />
        <Column
          title="审批开始时间"
          dataIndex="startTime"
          key="startTime"
          align="center"
          render={(text) => formatDate(text)}
        />
        <Column
          title="审批结束时间"
          dataIndex="endTime"
          key="endTime"
          align="center"
          render={(text) => formatDate(text)}
        />
        <Column
          title="剩余利用天数"
          dataIndex={['applyForm', 'useDay']}
          key="useDay"
          align="center"
        />
        <Column
          title={formatMessage('tableAction')}
          key="action"
          align="center"
          render={(_text, record: any) => (
            <Space>
              {approveNav === EnumApproveNavTypes.Undo ? (
                <Button
                  type="link"
                  onClick={() => {
                    showApproveDialogFunc(record, EnumApproveDialogTypes.Approve);
                  }}
                >
                  查看申请
                </Button>
              ) : (
                <Button
                  type="link"
                  onClick={() => {
                    showApproveDialogFunc(record, EnumApproveDialogTypes.View);
                  }}
                >
                  查看详情
                </Button>
              )}
            </Space>
          )}
        />
      </Table>
    </div>
  );
};

export default observer(ApproveList);
